import ReactEChartsCore from 'echarts-for-react/lib/core';
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import {
  DatasetComponent,
  LegendComponent,
  TooltipComponent,
  GridComponent,
  DataZoomSliderComponent,
} from 'echarts/components';
import {
  CanvasRenderer,
  // SVGRenderer,
} from 'echarts/renderers';

echarts.use([
  GridComponent,
  LineChart,
  CanvasRenderer,
  LegendComponent,
  TooltipComponent,
  DatasetComponent,
  DataZoomSliderComponent,
]);
import { commonOptions } from '@/app/components/echarts/commonOption';

export default function SeawatLineChart(props: {
  slider?: boolean;
  boxStyle?: React.CSSProperties;
  labels: string[];
  legendFontSize?: number;
  title: string;
  labelFontSize?: number;
  dataset: {
    data: number[];
    label: string;
    areaTopColor: string;
    labelColor: string;
    lineStyle: string;
  }[];
}) {
  const { labels, dataset, legendFontSize, labelFontSize } = props;

  const formatData = (value: string | number) => {
    if (props.title === '近12个月采购金额累计趋势图') {
      return Math.floor(Number(value) / 10000).toLocaleString();
    }
    return value.toString().length > 6 || Number(value) >= 1000
      ? Math.floor(Number(value) / 1000).toLocaleString() + 'K'
      : value.toLocaleString();
  };

  const options = {
    ...commonOptions,
    yAxis: {
      ...commonOptions.yAxis,
      onZero: false,
      axisLabel: {
        color: 'rgba(255,255,255,0.4)',
        fonSize: 12,
        formatter: function (value: string) {
          return formatData(value);
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#474A68',
          width: 1,
          // dashOffset: 50
        },
      },
    },

    xAxis: {
      ...commonOptions.xAxis,
      data: labels,
      axisLabel: {
        color: 'rgba(255,255,255,0.4)',
        margin: 16,
        // formatter: function (value: string) {
        //   let formatStr = value.slice(2);
        //   formatStr;
        //   return formatStr.slice(0, 2) + '年' + formatStr.slice(2) + '周';
        // },
      },
    },
    color: ['#47B0FA'],
    legend: {
      icon: 'rect',
      right: 0,
      itemWidth: legendFontSize || 14,
      itemHeight: 2,
      textStyle: {
        color: 'rgba(223,242,255,0.6)',
        fontSize: legendFontSize || 14,
      },
    },
    series: dataset?.map((i) => {
      return {
        type: 'line',
        data: i.data,
        name: i.label,
        smooth: false,
        lineStyle: {
          color: i.lineStyle,
        },
        itemStyle: {
          color: i.lineStyle,
        },
        labelLayout: {
          hideOverlap: true,
        },
        // symbol: 'none',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: i.areaTopColor, // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(95,179,248,0)', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        label: {
          show: true,
          position: 'top',
          color: i.labelColor,
          fontWeight: 'bold',
          hideOverlap: false,
          distance: 3,
          fontSize: labelFontSize || 12,
          formatter({ value }: { value: number }) {
            return formatData(value);
          },
        },
        // color: '#FCAF2B'
      };
    }),
    grid: {
      // containLabel: true,
      left: 80,
      right: 15,
      top: 60,
      bottom: 28,
    },
  };
  return (
    <div
      style={{
        position: 'relative',
        width: '100%',
        height: '100%',
        flexGrow: 1,
        ...props.boxStyle,
      }}
    >
      <ReactEChartsCore
        echarts={echarts}
        option={options}
        opts={{ devicePixelRatio: 2 }}
        notMerge={true}
        lazyUpdate={true}
        style={{
          width: '100%',
          height: '100%',
        }}
      />
    </div>
  );
}
